<template>
  <!-- 当日人流峰值 -->
  <div class="current-peak chart-box1">
    <div class="chart-title">当日人流峰值</div>
    <div class="chart-content" align="middle">
      <a-row align="middle" :gutter="12">
        <a-col :span="10" class="flex align-center">
          <div class="time-box">
            <a-space>
              <span>Time</span>
              <span class="time number">
                {{ data.time }}
              </span>
            </a-space>
          </div>
        </a-col>
        <a-col :span="14" class="peak-box">
          <div class="number peak">
            <count-to
              :start-val="data.count.oldVal"
              :end-val="data.count.newVal"
              :duration="3000"
            />
          </div>
          <Decoration1 :key="chartKey" :color="['transparent', '#38b05c']" />
          <!-- <DigitalFlop :config="config"></DigitalFlop> -->
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs, watch } from "vue";
import { Decoration1, Decoration12, DigitalFlop } from "@kjgl77/datav-vue3";
import CountTo from "../countTo/index.vue";
import store from "../../../../store";
import common from "../../utils/common";

export default defineComponent({
  name: "VisitorInfo",
  components: { Decoration1, Decoration12, DigitalFlop, CountTo },
  setup(props) {
    let keyCount = 1;
    const state = reactive({
      chartKey: `current_peak_${keyCount}`,
      data: {
        time: "",
        count: {
          ...common.countToInit,
        },
      },
    });

    watch(
      () => store.getters.resizeTrigger,
      () => {
        keyCount++;
        state.chartKey = `current_peak_${keyCount}`;
      }
    );

    watch(
      () => store.getters.flow.PeopleStreamMax,
      (val) => {
        if (val) {
          getData();
        }
      }
    );

    const getData = () => {
      const { PeopleStreamMax } = store.getters.flow;
      if (PeopleStreamMax) {
        state.data.time = PeopleStreamMax.time;
        state.data.count.oldVal = state.data.count.newVal;
        state.data.count.newVal = PeopleStreamMax.count;
      }
    };
    getData();

    return {
      ...toRefs(state),
    };
  },
});
</script>

<style lang="less" scoped>
@import "../../styles/common.less";
.current-peak {
  .chart-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .time-box {
    height: 100%;
    font-style: oblique;
    display: flex;
    align-items: center;
    color: #fff;
    letter-spacing: 2px;

    .time {
      color: #38b05c;
      // font-size: 2.4rem;
      line-height: 100%;
    }
  }
  .peak-box {
    position: relative;

    .peak {
      position: absolute;
      left: 2rem;
      top: 0;
      right: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      color: #38b05c;
      font-size: 4rem;
      font-weight: bold;
    }
  }
}
</style>
